<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../back-common.jsp"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
  <link href="<ls:templateResource item='/resources/plugins/taskdashboard/css/bootstrap.min.css?v=3.3.6'/>" rel="stylesheet">
  <link href="<ls:templateResource item='/resources/plugins/taskdashboard/css/style.css?v=4.1.0'/>" rel="stylesheet">
  <script src="<ls:templateResource item='/resources/plugins/taskdashboard/js/jquery-ui-1.10.4.min.js'/>" type="text/javascript"></script>
     <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>未开始</h3>
                        <ul class="sortable-list connectList agile-list" status="0">
						<c:forEach items="${requestScope.unstartList}" var = "task">
						      <li class="<c:choose>
            	<c:when test="${task.priority eq 1}">danger-element</c:when>
            	<c:when test="${task.priority eq 2}">warning-element</c:when>
            	<c:when test="${task.priority eq 3}">info-element</c:when>
            	<c:when test="${task.priority eq 4}">success-element</c:when>
            	<c:otherwise>success-element</c:otherwise>
            </c:choose>" id="${task.id}" status="${task.status}">
                                	${task.id }: ${task.name }
                                <div class="agile-detail">
                                    <a href="javascript:deleteTaskById('${task.id }')" class="pull-right btn btn-xs btn-white" style="margin-left: 2px">删除</a>
                                    <a href="javascript:assignTask('${task.id }')" class="pull-right btn btn-xs btn-white" >指派</a>
                                    <i class="fa fa-clock-o"></i><fmt:formatDate value="${task.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                    <p>${task.assignedtoRealName } ${task.totalConsumed }
                                </div>
                            </li>
						</c:forEach>		
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>进行中</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i>
                        <ul class="sortable-list connectList agile-list" status="1">
                           <c:forEach items="${requestScope.processingList}" var = "task">
						      <li class="<c:choose>
            	<c:when test="${task.priority eq 1}">danger-element</c:when>
            	<c:when test="${task.priority eq 2}">warning-element</c:when>
            	<c:when test="${task.priority eq 3}">info-element</c:when>
            	<c:when test="${task.priority eq 4}">success-element</c:when>
            	<c:otherwise>success-element</c:otherwise>
            </c:choose>"  id="${task.id}" status="${task.status}">
                                	${task.id }: ${task.name }
                                <div class="agile-detail">
                                    <a href="javascript:deleteTaskById('${task.id }')" class="pull-right btn btn-xs btn-white" style="margin-left: 2px">删除</a>
                                    <a href="javascript:assignTask('${task.id }')" class="pull-right btn btn-xs btn-white" >指派</a>
                                    <i class="fa fa-clock-o"></i><fmt:formatDate value="${task.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                    <p>${task.assignedtoRealName } ${task.totalConsumed }
                                </div>
                            </li>
						</c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>已完成</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i>
                        <ul class="sortable-list connectList agile-list" status="4">
                           <c:forEach items="${requestScope.finishList}" var = "task">
						      <li class="<c:choose>
            	<c:when test="${task.priority eq 1}">danger-element</c:when>
            	<c:when test="${task.priority eq 2}">warning-element</c:when>
            	<c:when test="${task.priority eq 3}">info-element</c:when>
            	<c:when test="${task.priority eq 4}">success-element</c:when>
            	<c:otherwise>success-element</c:otherwise>
            </c:choose>"  id="${task.id}" status="${task.status}">
                                	${task.id }: ${task.name }
                                <div class="agile-detail">
                                    <a href="javascript:deleteTaskById('${task.id }')" class="pull-right btn btn-xs btn-white" style="margin-left: 2px">删除</a>
                                    <a href="javascript:assignTask('${task.id }')" class="pull-right btn btn-xs btn-white" >指派</a>
                                    <i class="fa fa-clock-o"></i><fmt:formatDate value="${task.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                    <p>${task.assignedtoRealName } ${task.totalConsumed }
                                </div>
                            </li>
						</c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>已关闭</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i>
                        <ul class="sortable-list connectList agile-list" status="5">
                            <c:forEach items="${requestScope.closeList}" var = "task">
						      <li class="<c:choose>
            	<c:when test="${task.priority eq 1}">danger-element</c:when>
            	<c:when test="${task.priority eq 2}">warning-element</c:when>
            	<c:when test="${task.priority eq 3}">info-element</c:when>
            	<c:when test="${task.priority eq 4}">success-element</c:when>
            	<c:otherwise>success-element</c:otherwise>
            </c:choose>"  id="${task.id}" status="${task.status}">
                                	${task.id }: ${task.name }
                                <div class="agile-detail">
                                    <a href="javascript:deleteTaskById('${task.id }')" class="pull-right btn btn-xs btn-white" style="margin-left: 2px">删除</a>
                                    <a href="javascript:assignTask('${task.id }')" class="pull-right btn btn-xs btn-white" >指派</a>
                                    <i class="fa fa-clock-o"></i><fmt:formatDate value="${task.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                    <p>${task.assignedtoRealName } ${task.totalConsumed }
                                </div>
                            </li>
						   </c:forEach>
                        </ul>
                    </div>
                </div>
           </div>
             <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>已取消</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i>
                        <ul class="sortable-list connectList agile-list" status="6">
                          <c:forEach items="${requestScope.cancelList}" var = "task">
						      <li class="<c:choose>
            	<c:when test="${task.priority eq 1}">danger-element</c:when>
            	<c:when test="${task.priority eq 2}">warning-element</c:when>
            	<c:when test="${task.priority eq 3}">info-element</c:when>
            	<c:when test="${task.priority eq 4}">success-element</c:when>
            	<c:otherwise>success-element</c:otherwise>
            </c:choose>"  id="${task.id}" status="${task.status}">
                                	${task.id }: ${task.name }
                                <div class="agile-detail">
                                    <a href="javascript:deleteTaskById('${task.id }')" class="pull-right btn btn-xs btn-white" style="margin-left: 2px">删除</a>
                                    <a href="javascript:assignTask('${task.id }')" class="pull-right btn btn-xs btn-white" >指派</a>
                                    <i class="fa fa-clock-o"></i><fmt:formatDate value="${task.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                    <p>${task.assignedtoRealName } ${task.totalConsumed }
                                </div>
                            </li>
						</c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
    $(".sortable-list").sortable({
        connectWith: ".connectList",
        // 拖拽结束函数
        stop: (e, ui) => {
          // 当前拽入的元素
          let item = $(ui.item)
          // 当前拽入元素的下标
          let index = item.index()
       	 var id = item.attr("id");
       	 var ulStatus = item.parent().attr("status");
       	 var itemStatus = item.attr("status"); //每个元素的状态,如果移动到本身的状态不会修改
       	 if(itemStatus != ulStatus){
            	// console.log("receive id = " + item.attr("id") + ",status = " + item.attr("status"));
           	 if(ulStatus == 1){
           		 startTask(id,ulStatus);
           	 }else if(ulStatus == 4){
           		 finishTask(id,ulStatus);
           	 }else if(ulStatus == 5){
           		 closeTask(id,ulStatus);
           	 }else if(ulStatus == 6){
           		 cancelTask(id,ulStatus);
           	 }else{
           		layer.msg('目标无法更改为该状态');
           		sendData();
           	 }
       	 }

        },
        // 开始拖拽时的函数
        start: (e, ui) => {
          // 拖拽前的父级节点
          dragBeforeParentNode = ui.item[0].parentNode
          // 让placeholder和源高度一致
           ui.placeholder.height(ui.helper[0].scrollHeight).width(258)
          let item = $(ui.item)
        },
        receive: function( event, ui ) {
        	// 拖拽后的动作
        	
        }
    }).disableSelection();

});


//开始项目
function startTask(taskId, status){
		var page = contextPath + "/admin/task/startTask/" + taskId;
		layer.open({
	    		  type: 2,
	    		  id: "startTask",
	    		  title: "开始目标",
	    		  area: ['900px'],
	    		  content: page, //iframe的url，no代表不显示滚动条
	    		  success: function(layero, index) {
	    		        layer.iframeAuto(index);
	    		        layer.style(index, {
	    		        	  top: '60px'
	    		        	}); 
	    		    }
	    		});
	}
	 
	 
	 //完成项目
function finishTask(taskId, status){
		var page = contextPath + "/admin/task/finishTask/" + taskId;
		layer.open({
	    		  type: 2,
	    		  id: "finishTask",
	    		  title: "完成目标",
	    		  area: ['800px'],
	    		  content: page, //iframe的url，no代表不显示滚动条
	    		  success: function(layero, index) {
	    		        layer.iframeAuto(index);
	    		        layer.style(index, {
	    		        	  top: '60px'
	    		        	}); 
	    		    }
	    		});
	}
	 
	 //关闭项目
function closeTask(taskId, status){
		var page = contextPath + "/admin/task/closeTask/" + taskId;
		layer.open({
	    		  type: 2,
	    		  id: "closeTask",
	    		  title: "关闭目标",
	    		  area: ['800px'],
	    		  content: page, //iframe的url，no代表不显示滚动条
	    		  success: function(layero, index) {
	    		        layer.iframeAuto(index);
	    		        layer.style(index, {
	    		        	  top: '60px'
	    		        	}); 
	    		    }
	    		});
	}
	 
	 //取消项目
function cancelTask(taskId, status){
		var page = contextPath + "/admin/task/cancelTask/" + taskId;
		layer.open({
	    		  type: 2,
	    		  id: "cancelTask",
	    		  title: "取消目标",
	    		  area: ['900px'],
	    		  content: page, //iframe的url，no代表不显示滚动条
	    		  success: function(layero, index) {
	    		        layer.iframeAuto(index);
	    		        layer.style(index, {
	    		        	  top: '60px'
	    		        	}); 
	    		    }
	    		});
	}
	 
	 //为成员设置项目
function assignTask(taskId){
		var page = contextPath + "/admin/task/assignTask/" + taskId;
		//iframe窗
		layer.open({
		  type: 2,
		  id: "assignTask",
		  title: "指派成员",
		  area: ['800px'],
		  content: page, //iframe的url，no代表不显示滚动条
		  success: function(layero, index) {
		        layer.iframeAuto(index);
		        layer.style(index, {
		        	  top: '60px'
		        	}); 
		    }
		});
	}
	
	
function deleteTaskById(id) {
  layer.confirm("确定删除目标吗？", {
		 icon: 3
	     ,btn: ['确定','关闭'] //按钮
	   }, function(){
		   console.log("");
    	$.ajax({
      		url : "${contextPath}/admin/task/delete/" +id,
      		type : "PUT",
      		dataType :"JSON",
      		async : true,
      		error : function(xhr,status,error){
      			layer.msg("网络错误,请稍后重试!");
      		},
      		success : function(result,status,xhr){
      			if(result == "success"){
      				layer.closeAll('dialog'); //关闭信息框
      				sendData();
      			}else{
      				 layer.msg("删除目标失败，该目标已经有对应的审核过的日志");
      			}
      		}
      	});
 });
}
</script>